<!-- 1.0同步测试，修改代码 -->

<ion-header>
  <ion-navbar>
    <ion-searchbar (tap)='goSearchPage()'></ion-searchbar>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
    <!-- 轮播页 -->
    <!-- *ngIf="focusList.length>0"  先拿到轮播图的数据在渲染到页面上 -->
    <ion-slides  *ngIf = "focusList.length > 0" pager class="focus" loop="true" autoplay="3000">
        <ion-slide *ngFor = "let item of focusList">
          <img [src]= "config.apiUrl+item.pic" />
        </ion-slide>
    </ion-slides>

    <!-- 横批滚动页 -->
    <div class="home_product">
        精品推荐
    </div>

    <!--外层的ion-scroll 100%   里面元素的宽度要大于100%-->
    <div class="slide_product">
        <ion-scroll scrollX="true">
            <ul class="clearfix" [ngStyle]="{'width':listWidth}">
                <li *ngFor="let item of bestList" [navPush]="GoodsdetailPage" [navParams]="{'id':item['_id']}">
                    <img [src] = 'config.apiUrl+item.pic' />
                    <p>{{item.title}}</p>
                </li>
            </ul>
        </ion-scroll>
    </div>

    <div class="home_product">
        猜你喜欢
    </div>

    <!-- 网格样式商品 -->
    <div class="hot_shop">
        <ion-row>
              <ion-col col-6 *ngFor="let item of hotList" [navPush]="GoodsdetailPage" [navParams]="{'id':item['_id']}">
                <img [src] = 'config.apiUrl+item.pic' />
                <div class="hot_shop_detail">{{item.title}}</div>  
              </ion-col>
        </ion-row>
    </div>
    
</ion-content>
